<template>
  <div class="manage-main">
    <header class="main-title">
      <div class="main-label">角色管理</div>
      <div class="search">
        <el-button v-if="usePermission('role.add')" color="#6C52EA" icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </div>
    </header>
    <div class="role-table">
      <el-table
        :cell-style="{
          fontSize: '14px',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(49, 53, 64, 1)',
          textAlign: 'center'
        }"
        :data="dataList"
        :header-cell-style="{
          background: 'rgb(250, 250, 250)',
          fontSize: '14px',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(55, 59, 69, 1)',
          textAlign: 'center'
        }"
        v-loading="loading"
        highlight-current-row
        row-key="id"
        ref="table"
        @row-click="handleNodeClick"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="角色名称">
          <template #default="{ row }">
            <el-tag>{{ row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="角色编码">
          <template #default="{ row }">
            <el-tag>{{ row.role_code }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序号"></el-table-column>
        <el-table-column property="status" label="状态">
          <template #default="{ row }">
            <span>{{ !row.status ? '正常' : '停用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="{ row }">
            <el-button
              size="small"
              link
              @click="handleEdit(row)"
              :disabled="!usePermission('role.updata')"
              >修改</el-button
            >
            <el-button
              size="small"
              link
              @click="handleRemove(row)"
              :disabled="!usePermission('role.delete')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <footer class="content-footer">
      <!-- 页脚 -->
      <!-- <el-pagination
        v-model:currentPage="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+total"
        @size-change="onSize"
        @current-change="onPage"
      /> -->
    </footer>
    <!-- 新增编辑弹窗 -->
    <EditDialog
      :dialog="dialog"
      :editList="editList"
      :form="form"
      :dialogTitle="dialogTitle"
      @dialogClose="dialogClose"
      @dialogSave="dialogSave"
    ></EditDialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue'
import { ElMessage, ElMessageBox, emitChangeFn } from 'element-plus'
import { ElTable } from 'element-plus'
import { getRoleList, deleteRoleData } from '@/apis/jurisdiction/role'

// import { Isearch, IroleData } from '../config/menuRole'
// import { getUserRoleList, deleteUserRoleData } from '@/apis/auth/user-role'
import { usePermission } from '@/hooks/usePermission'

import EditDialog from './EditDialog.vue'
import Bus from '@/utils/bus'
import { Itype } from '@/type'

const form = reactive({
  name: '',
  role_code: '', // 角色编码
  sort: '' // 排序
})

/**
 * @desc:获取角色数据
 */
interface Isearch {
  [key: string]: any
}
let search: Isearch = ref()
const loading = ref(false)
let dataList: Itype = ref()
let searchList: Isearch = ref([])
const getData = () => {
  loading.value = true
  getRoleList()
    .then((res) => {
      if (res.roleList) {
        dataList.value = res.roleList
        dataList.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
      }
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

getData()

/**
 * @desc: 分页数量
 * @param {Number} size
 */
const onSize = (size: number) => {
  //   pager.value.size = size
  getData()
}

/**
 * @desc: 切换页码
 * @param {Number} page
 */
const onPage = (page: number) => {
  //   pager.value.page = page
  getData()
}

/**
 * @desc:新增角色
 */
const dialog = ref(false)
const handleAdd = () => {
  dialog.value = !dialog.value
}

/**
 * @desc: 选中row
 */
const emit = defineEmits(['click-row'])
const table = ref<InstanceType<typeof ElTable>>()
const handleNodeClick = (item: any) => {
  table.value?.setCurrentRow(item)
  emit('click-row', item)
}

/**
 * @desc:关闭dialog
 */
const dialogClose = () => {
  dialog.value = !dialog.value
}

/**
 * @desc:保存dialog
 */
const dialogSave = () => {
  dialog.value = !dialog.value
  getData()
}

/**
 * @desc:打开编辑弹窗
 */
let editList: Itype = ref()
let dialogTitle = ref('')
const handleEdit = (row: []) => {
  getData()
  dialog.value = !dialog.value
  editList.value = row
  dialogTitle.value = '角色修改'
}

/**
 * @desc: 删除
 * @return {*}
 */
const handleRemove = (row: any) => {
  ElMessageBox.confirm(`您确定要删除此数据吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    lockScroll: false
  })
  // .then(() => {
  //   deleteUserRoleData(row.id).then((res) => {
  //     if (res.data && res.code !== 200) return
  //     getData()
  //   })
  // })
  // .catch(() => {
  //   ElMessage({
  //     type: 'info',
  //     message: '已取消'
  //   })
  // })
}

defineExpose({ getData })
</script>

<style lang="less" scoped>
:deep(.el-input--small .el-input__wrapper) {
  background: rgba(247, 247, 247, 1);
  color: rgba(247, 247, 247, 1);
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #6c52ea inset;
  background: #fff;
}
:deep(.el-pager li) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-pager li.is-active) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  color: #fff;
  background: #6c52ea;
  opacity: 0.6;
}
:deep(.el-pagination__sizes + button.btn-prev[type='button']) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-pagination__sizes + button.btn-prev[type='button'].is-active) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-pager + button.btn-next[type='button']) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__inner:hover) {
  border-color: #6c52ea;
}
.manage-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  .search {
    display: flex;
    .search-input {
      width: 150px;
      margin-right: 20px;
    }
  }
  .main-title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    .main-label {
      transition: all 0.3s;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.65);
      font-weight: 700;
    }
  }
  .role-table {
    width: 100%;
    flex: 1;
  }
  .content-footer {
    width: 100%;
    padding-bottom: 10px;
  }
}
</style>
